<template>
  <div>
    <!-- 头 -->
    <div class="heads">
      <h2>
        视频调阅: <span>{{ tableData.IdName }}</span>
      </h2>
    </div>
    <el-divider></el-divider>
    <!-- 表格 -->
    <div class="retrievetable">
      <el-table :data="facevideo.list" border @row-click="rowClick">
        <el-table-column
          prop="applCde"
          label="客户申请流水号"
          align="center"
        ></el-table-column>

        <el-table-column prop="videoUrl" label="视频编号" align="center">
          <template slot-scope="{ row }">
            <el-link v-model="row.videoUrl" type="primary">{{
              row.videoUrl
            }}</el-link>
          </template>
        </el-table-column>

        <el-table-column
          prop="agentId"
          label="座席编号"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="answerTime"
          label="开始时间"
          align="center"
        ></el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row
        type="flex"
        justify="end"
        align="middle"
        style="height: 60px"
        v-if="facevideo.paging"
      >
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="facevideo.page.page"
          :page-size="facevideo.page.pageSize"
          layout="total, prev, pager, next"
          :total="facevideo.page.total"
          :small="true"
        >
        </el-pagination>
      </el-row>
    </div>

    <div class="videobody">
      <el-table :data="facevideo2.list" border>
        <el-table-column
          prop="awnum"
          label="题目"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="content"
          label="题目内容"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="questionType"
          label="题目类型"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="answer"
          label="答案"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="answerValueName"
          label="回答"
          align="center"
        ></el-table-column>

        <!-- <el-table-column label="回答" width="300px" align="center">
          <template slot-scope="{ row }">
            <el-radio-group v-model="row.userAnswer">
              <el-radio
                :label="option"
                v-for="(option, index) in row.answerOptions"
                :key="index"
                >{{ option }}</el-radio
              >
            </el-radio-group>
          </template>
        </el-table-column> -->
        <el-table-column label="备注" align="center">
          <template slot-scope="{ row }">
            <el-input v-model="row.remark" size="mini"></el-input>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 视频 -->
    <div class="footer-video" style="margin-top: 2rem;">
      <video
        controls
        :src="videoInfo.src"
        @error="handleVideoError"
        class="fill-container"
      >
        {{ videoInfo.msg }}
      </video>
    </div>
    <!-- 返回 -->
    <div class="footer-back">
      <el-button type="primary" @click="gobackretrieve()" size="mini"
        >返回</el-button
      >
    </div>
  </div>
</template>

<script>
import {
  queryInfofaceuserinfo2,
  gethistoryvideo,
  getqueryInfohistorylists
} from "@/api/hubeixiaojin/queryInfo";

export default {
  name: "loanhistoryvideo",
  props: ["tableData", "option"],
  components: {},

  data() {
    // 表单身份证x`
    var idcardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
    var validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("证件号不能为空!!"));
      }
      if (!idcardReg.test(value)) {
        callback(new Error("请输入正确的证件号码！"));
      } else {
        callback();
      }
    };
    return {
      facevideo: {
        list: [],
        paging: false,
        page: {
          total: 100,
          pageSize: 10,
          page: 1
        }
      },
      videoInfo: {
        src: "",
        msg: "您的浏览器不支持视频标签。"
      },
      facevideo2: {
        list: []
      },
      agentInfo: {
        //当前座席名字和id
        // dispatchingPerson: Constants.Agent.agentName,
        // dispatchingId: Constants.Agent.agentId,
        // //目标座席和id
        // agentId: "",
        // agentName: "",
        // //座席行政组
        // deptGroupName: Constants.Agent.deptGroupName,
        // //行政组code
        // deptGroupCode: Constants.Agent.deptGroupCode,
        // //access_token
        // access_token: Constants.Agent.access_token,
        // //tenantId
        // tenantId: Constants.Agent.tenantId,
        // //orgCode
        // orgCode: Constants.Agent.orgCode
      } //调单用到的座席信息
    };
  },
  mounted() {
    const sessionStr = sessionStorage.getItem("userInfo");
    const agentUser = JSON.parse(sessionStr);
    this.agentInfo = agentUser.content;
    this.getinfo();
    this.getanswerlist();
  },
  methods: {
    getinfo() {
      // console.log("面签状态==",this.tableData.approvaResult);
      var params = {};
      var approvaResult = this.tableData.approvaResult;
      if (approvaResult == "3") {
        console.log("当前数据为原始数据");
        params = {
          sortCol: "id",
          condition: {
            applSeq: this.tableData.applSeq,
            id: this.tableData.id
          } //申请状态
        };
      } else {
        console.log("当前数据为打回数据");
        params = {
          sortCol: "id",
          condition: {
            applSeq: this.tableData.applSeq
            // id: this.tableData.id
          } //申请状态
        };
      }

      queryInfofaceuserinfo2(params, this.agentInfo)
        .then(res => {
          var datass = [];
          var applCde = res.data.data.listData[0].applCde;
          var agentId = res.data.data.listData[0].agentId;
          //面签数据
          res.data.data.listData.forEach(element => {
            // 面签数据有listSessionDetail数组
            if (
              element.listSessionDetail &&
              element.listSessionDetail.length > 0
            ) {
              // 获取listSessionDetail数组内的faceInteSessionInfo
              element.listSessionDetail.forEach(el => {
                datass.push(el.faceInteSessionInfo);
              });
            }
          });
          var arrlist = [];
          // var data = res.data.data.listData[0].listSessionDetail;
          datass.forEach(element => {
            element.applCde = applCde;
            element.agentId = agentId;
            arrlist.push(element);
          });
          console.log("整合数据==", arrlist);

          this.facevideo.list = arrlist;
        })
        .catch(err => {
          console.log(err);
        });
    },
    getanswerlist() {
      //获取问题列表
      // var params = {
      //   condition: {
      //     faceInterviewId: this.tableData.id
      //   },
      //   sortCol: "id"
      // };

      var params = {};
      var approvaResult = this.tableData.approvaResult;
      if (approvaResult == "3") {
        params = {
          condition: {
            applSeq: this.tableData.applSeq,
            id: this.tableData.id
          },
          sortCol: "id"
        };
      } else {
        params = {
          sortCol: "id",
          condition: {
            applSeq: this.tableData.applSeq
            // id: this.tableData.id
          }
        };
      }

      getqueryInfohistorylists(params, this.agentInfo)
        .then(res => {
          // console.log("答题信息=", res.data.data.listData);
          // this.dataInfo.list = res.data.data.listData
          var data = res.data.data.listData;
          var datas = [];
          var datalist = [];

          data.forEach(element => {
            element.listSessionDetail.forEach(el => {
              datas.push(el.faceInteAnswHists);
            });
          });
          datas.forEach(element => {
            datalist.push(...element);
          });

          datalist.forEach((element, index) => {
            element.user = this.tableData;
            element.awnum = index + 1;
          });

          this.facevideo2.list = datalist;
        })
        .catch(err => {
          console.log(err);
        });
    },

    gobackretrieve() {
      //返回数据搜索页
      this.$emit("gobackretrieve");
    },
    // 分页
    handleCurrentChange(newPage) {
      console.log("分页", newPage);
    },
    //点击数据，展示视频val
    rowClick(val) {
      console.log("获取点击视频", val.videoUrl);
      this.loadVideoSource(val.videoUrl); //视频赋值
      //问题赋值
      // this.facevideo2.list = [
      //   {
      //     questionTitle: "覆盖刷新",
      //     questionContent: "覆盖1",
      //     questionType: "覆盖1",
      //     answer: "覆盖1",
      //     userAnswer: "",
      //     answerOptions: ["一直", "不一致", "存疑"],
      //     remark: ""
      //   },
      //   {
      //     questionTitle: "覆盖2",
      //     questionContent: "覆盖2",
      //     questionType: "覆盖2",
      //     answer: "覆盖2",
      //     userAnswer: "",
      //     answerOptions: ["一直", "不一致", "存疑"],
      //     remark: ""
      //   },
      //   {
      //     questionTitle: "覆盖3",
      //     questionContent: "覆盖3",
      //     questionType: "覆盖3",
      //     answer: "覆盖3",
      //     userAnswer: "",
      //     answerOptions: ["一直", "不一致", "存疑"],
      //     remark: ""
      //   }
      // ];
    },
    //视频报错
    handleVideoError(event) {
      console.error("视频加载出错:", event.target.error);
    },
    async loadVideoSource(videoSrc) {
      this.videoInfo.src = videoSrc;
      // 等待视频加载完成后再尝试播放
    }
  }
};
</script>

<style>
.footer-video {
  width: 100%;
  height: 300px;
  position: relative;
}
.fill-container {
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.footer-back {
  display: flex;
  justify-content: end;
}
.videobody {
  margin-top: 20px;
}
</style>
